import React, { Component, PropTypes } from 'react';
import {
  WingBlank, WhiteSpace, Grid, Flex, Card, Modal,
} from 'antd-mobile';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { GENDER_MAP } from 'const';
import styles from './styles.less';

const TongueListPage = ({ dispatch, location, ...rest }) => {
  window.scrollTo(0, 0);
  if(rest.list){
      for (var i = rest.list.length - 1; i >= 0; i--) {
        if(rest.list[i].comment && rest.list[i] == "undefined"){
            rest.list[i] == "";
        }
        let Birth;
        if(rest.list[i].birthday){
            Birth = rest.list[i].birthday.replace(/-/g, "/");//在iOS 上的兼容处理
        }
        let Agetime = rest.list[i].age;
        let Ages = "", time = new Date(),times = new Date(Birth);// new Date()在iOS 上的兼容处理
        let newYear = time.getFullYear(), oldYear = times.getFullYear();
        let newMonth = time.getMonth()+1; let oldMonth = parseInt(times.getMonth())+1;
        let newDay = time.getDate(), oldDay = times.getDate();
        let year = newYear - oldYear,Today = newDay - oldDay, month = newMonth - oldMonth; // 天 // 月;
        if(Agetime >= 1){
           Ages = Agetime + '岁'
        }else{
           if(year == 0){
             if(month >= 1){  
                   Ages = month+ '月';  
              }else{
                if(month < 1&&Agetime <=0){
                   Ages = Today+ '天';
                }
              }
           }else{
              let m1 = 12 - oldMonth;
              let r1 = 31 - oldDay;
              Ages = m1 + newMonth + '月' ;
              if(m1 == 0){
                if (newMonth ==1 ) {
                  Ages = r1 + newDay;
                  if (Ages>=31) {
                    Ages = 1+'月';
                  }else{
                    Ages += '天';
                  }
                }
              }
              
           }
        }
        rest.list[i].TongueAge = Ages;
      }
  }


  const goto = (tongue) => {
    dispatch(routerRedux.push({
      pathname: `${location.pathname}/${tongue.id}`,
      state: { 
        id: tongue.id,
        patientId:tongue.patientId 
      },
    }));
  };

  const deleteTongue = (tongue, e) => {
    e.preventDefault();
    e.stopPropagation();
    Modal.alert('提示', '确认要彻底删除记录吗？', [
      { text: '取消', onPress() { } },
      { text: '确定', onPress() {
        dispatch({
          type: 'tongue/delete',
          payload: {
            id:tongue.id, 
            patientId:tongue.patientId
          },
        });
      } }
    ]);
  };

  return (
    <WingBlank size="md">
      <WhiteSpace />
      {rest.list != null ? "" :
      <div>
        <Flex justify="center" style={{ margin: "50px 0" }} >
          <img src={require('../../../assets/nodata.png')} /> 
        </Flex>
        <Flex justify="center" style={{ color: '#aa4929', margin: "50px 0" }} >
          暂无舌镜记录
        </Flex>
      </div>
    }
      <Grid
        className="tongue-list"
        data={rest.list}
        columnNum={2}
        hasLine={false}
        onClick={goto}
        renderItem={(tongue, i) => [
          <Card key="tongue-card" className={styles.tonguecard}>
            <WhiteSpace />
            <WingBlank size="md">
              <img src={tongue.picUrl} className={styles.tongueImage} />
              <Card.Header
                title={tongue.name}
                extra={<Flex>
                <Flex.Item style={{ fontSize: '0.28rem',color: 'black'}}>
                  {GENDER_MAP[tongue.gender]}
                </Flex.Item>
                <Flex.Item style={{ fontSize: '0.28rem',color: 'black'}}>
                  {tongue.TongueAge}
                </Flex.Item>
              </Flex>} />
              <Flex>
                <Flex.Item style={{ fontSize: '0.25rem', color: '#888'}}>
                  {tongue.createTime}
                </Flex.Item>
              </Flex>
              <WhiteSpace />
              <Card.Footer
                content={tongue.comment == "undefined"? <div>&nbsp;</div>: tongue.comment} />
              <Flex
                justify="end"
                className={styles.tongueDelete}>
                <button type="button" onClick={deleteTongue.bind(this, tongue)}>
                  删除
                  {/*<img src={require('assets/')}>*/}
                </button>
              </Flex>
            </WingBlank>
          </Card>,
          <WhiteSpace key="tongue-space" />
        ]} />
      <WhiteSpace />
    </WingBlank>
  );
};

export default connect(({ tongue }) => ({
  ...tongue,
}))(TongueListPage);
